import React from 'react'
import { Button, Select, Input } from "antd"
import styles from "../index.module.scss"
import { SearchOutlined } from '@ant-design/icons';

interface HeaderTitleProps {
  eventMessage: () => void;
}

const selectBox1 = [
  { value: 0, label: <span>狮子头</span> },
  { value: 1, label: <span>螺蛳粉</span> },
  { value: 2, label: <span>炸酱面</span> }
]
const selectBox2 = [
  { value: 0, label: <span>狮子头</span> },
  { value: 1, label: <span>螺蛳粉</span> },
  { value: 2, label: <span>炸酱面</span> }
]
const selectBox3 = [
  { value: 0, label: <span>狮子头</span> },
  { value: 1, label: <span>螺蛳粉</span> },
  { value: 2, label: <span>炸酱面</span> }
]
const selectFiled = {
  value: 'value',
  label: 'label'
}
const selectChange = (num: number) => {
  console.log(num)
}

const Box: React.FC<HeaderTitleProps> = ({eventMessage = () => {}}) => {
  const searchFun = () => {
    console.log('search')
    eventMessage()
  }
  return (
    <div className={styles['header-title']}>
      <span className={styles['t1']}>园区企业总览</span>
      <div className={styles['b1']}>
        <span className={styles['b1-1']}>区域过滤</span>
        <Select className={styles['b1-1']} options={selectBox1} onChange={() => selectChange(1)} fieldNames={selectFiled} placeholder={'请选择'}></Select>
        <Select className={styles['b1-1']} options={selectBox2} onChange={() => selectChange(2)} fieldNames={selectFiled} placeholder={'请选择'}></Select>
        <Select className={styles['b1-1']} options={selectBox3} onChange={() => selectChange(3)} fieldNames={selectFiled} placeholder={'请选择'}></Select>
      </div>
      <div className={styles['b2']}>
        <span className={styles['b2-1']}>地址关联企业</span>
        <Select className={styles['b2-1']} options={selectBox3} onChange={() => selectChange(4)} fieldNames={selectFiled} placeholder={'请选择'}></Select>
        <Input className={styles['b2-1']} placeholder="查询企业名称"></Input>
      </div>
      <div className={styles['g1']}>
        <Button type="primary" icon={<SearchOutlined />} iconPosition="start" onClick={searchFun}>查询</Button>
      </div>
    </div>
  )
}
export default Box
